<script setup>
import { ref } from 'vue'
const show = ref(true)
const defaultClass = ref([])
defineProps({
  header: String,
  mode: {
    type: String,
    default: 'static'
  }
})

watch(
  () => show.value,
  newValue => {
    if (!newValue) {
      setTimeout(() => {
        defaultClass.value.push('card_border')
      }, 300)
    } else {
      defaultClass.value = defaultClass.value.length > 0 ? [] : []
    }
  }
)

const resloveShow = () => {
  show.value = !show.value
}
</script>

<template>
  <el-card class="ps_order_header" :class="defaultClass">
    <template #header v-if="$props.header">
      <div class="card_title">
        <template v-if="mode === 'collapse'">
          <el-icon v-if="show"><CaretBottom /></el-icon>
          <el-icon v-else><CaretRight /></el-icon>
        </template>
        <span @click="resloveShow">{{ header }}</span>

        <template v-if="$slots.end">
          <div class="card_title_container">
            <slot name="end"> </slot>
          </div>
        </template>
      </div>
    </template>

    <el-collapse-transition>
      <div v-show="show">
        <slot name="default"> </slot>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style lang="scss">
// 通过这个类动态取消card的内边距
.card_border {
  transition: border 0.3s;
  .el-card__body {
    padding: 0px;
  }
}
</style>
